<template>
  <div class="progress-bar" :class="{ empty: phaseProgressInfo.length === 0 }">
    <e-empty v-if="phaseProgressInfo.length === 0" :size="120" :height="120" centered />
    <div v-for="phase in result" v-else :key="phase.phaseID" :class="['phase', phase.status]">
      <div class="tag">
        <a-tag>{{ phase.name }}</a-tag>
      </div>
      <div class="triangle"><e-icon type="Unfold" /></div>
      <div class="bar"></div>
      <div class="user-name">
        <a-space>
          <span>{{ phase.time ? dayjs(phase.time).format('YYYY-MM-DD HH:mm') : phase.time }}</span>
          {{ phase.user }}
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import EIcon from '@/components/EIcon.vue'
import dayjs from 'dayjs'
import EEmpty from '@/components/EEmpty.vue'
const props = defineProps({
  phaseProgressInfo: {
    type: Array,
    default() {
      return []
    }
  },
  cancelInfo: {
    type: Object,
    default() {
      return {}
    }
  }
})
const template = [
  {
    phaseID: 3,
    name: 'Phase 3',
    time: '',
    user: '',
    status: ''
  },
  {
    phaseID: 2,
    name: 'Phase 2',
    time: '',
    user: '',
    status: ''
  },
  {
    phaseID: 1,
    name: 'Phase 1',
    time: '',
    user: '',
    status: ''
  },
  {
    phaseID: 0,
    name: 'Close',
    time: '',
    user: '',
    status: ''
  }
]
const result = ref([])
const loadData = () => {
  result.value = JSON.parse(JSON.stringify(template))
  props.phaseProgressInfo.forEach(phase => {
    const item = result.value.find(item => item.phaseID === phase.phaseID)
    if (item) {
      item.status = 'active'
      item.time = phase.phaseTime
      item.user = phase.phaseUserName
    }
  })
  // 兼容老数据（只有一条phase0数据）
  if (props.phaseProgressInfo.length === 1 && props.phaseProgressInfo[0].phaseID === 0) {
    result.value.forEach(item => {
      item.status = 'active'
    })
  }
}
watch(
  () => props.phaseProgressInfo,
  () => {
    loadData()
  }
)
watch(
  () => props.cancelInfo,
  value => {
    if (value) {
      const lastIndex = result.value.findIndex(item => item.phaseID === value.phaseID)
      result.value[lastIndex + 1].status = 'canceled'
      result.value[lastIndex + 1].name = 'Canceled'
      result.value[lastIndex + 1].time = value.phaseTime
      result.value[lastIndex + 1].user = value.phaseUserName
    }
  }
)
onMounted(() => {
  loadData()
})
</script>

<style lang="less" scoped>
.progress-bar {
  display: flex;
  justify-content: space-between;
  padding: 32px 64px;
  &.empty {
    justify-content: center;
  }
  .phase {
    width: 25%;
    text-align: center;
    .tag {
      .ant-tag {
        padding: 6px 20px;
        font-size: 14px;
        background-color: @gray;
        color: @text-gray;
        border-color: @gray;
        font-weight: bold;
        .e-icon {
          display: none;
        }
      }
    }
    .triangle {
      line-height: 14px;
      color: @phase-default;
    }
    .bar {
      display: flex;
      justify-content: center;
      &:before {
        content: ' ';
        height: 4px;
        width: 50%;
        background-color: @phase-default;
      }
      &:after {
        content: ' ';
        height: 4px;
        width: 50%;
        background-color: @phase-default;
      }
    }
    &:nth-child(1) {
      .bar {
        &:before {
          visibility: hidden;
        }
        &:after {
          border-radius: 2px 0 0 2px;
        }
      }
    }
    &:nth-last-child(1) {
      .bar {
        &:before {
          border-radius: 0 2px 2px 0;
        }
        &:after {
          visibility: hidden;
        }
      }
    }
    .user-name {
      padding: 14px;
      color: @text-gray;
    }
    &.active {
      &:nth-child(1) {
        .ant-tag {
          background-color: @phase3-bg;
          color: @phase3;
          border: 1px solid @phase3;
        }
        .triangle {
          color: @phase3;
        }
        .bar {
          &:after {
            background-color: @phase3;
          }
        }
      }
      &:nth-child(2) {
        .ant-tag {
          background-color: @phase2-bg;
          color: @phase2;
          border: 1px solid @phase2;
        }
        .triangle {
          color: @phase2;
        }
        .bar {
          &:before {
            background-color: @phase3;
          }
          &:after {
            background-color: @phase2;
          }
        }
      }
      &:nth-child(3) {
        .ant-tag {
          background-color: @phase1-bg;
          color: @phase1;
          border: 1px solid @phase1;
        }
        .triangle {
          color: @phase1;
        }
        .bar {
          &:before {
            background-color: @phase2;
          }
          &:after {
            background-color: @phase1;
          }
        }
      }
      &:nth-child(4) {
        .ant-tag {
          background-color: @phase0-bg;
          color: @phase0;
          border: 1px solid @phase0;
          .e-icon {
            display: inline;
          }
        }
        .triangle {
          color: @phase0;
        }
        .bar {
          &:before {
            background-color: @phase1;
          }
        }
      }
    }
    &.canceled {
      .bar {
        position: relative;
        justify-content: left;
        &:after {
          visibility: unset;
          content: '\e952';
          font-family: 'icon_crm' !important;
          position: absolute;
          height: 0;
          width: 0;
          top: -8px;
          color: @phase-default;
          left: calc(50% - 6px);
        }
      }
      & ~ .phase {
        visibility: hidden;
      }
    }
  }
}
</style>
